<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div ref="component" id="component"></div>
  </el-dialog>
</template>

<script>
import Vue from "vue";
export default {
  data: () => ({
    component: null,
    title: "编辑",
    dialogVisible: false,
    options: {},
    instance: {}
  }),
  mounted() {},
  watch: {
    dialogVisible(v) {
      if (!this.component) {
        return;
      }
      if (v) {
        // this.$nextTick(() => {
        //   const component = Vue.extend(this.component);
        //   this.instance = new component({
        //     el: "#component",
        //     data: { ...this.options, thisDialog: this }
        //   });
        // });
      }
    }
  },
  methods: {
    show(opt) {
      this.dialogVisible = true;
      let data = Object.assign(this.instance, opt, { thisDialog: this });
      this.$nextTick(() => {
        const component = Vue.extend(this.component);
        this.instance = new component({
          el: "#component",
          data: { ...data }
        });
      });
      return this;
    },
    close() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style></style>
